<script setup lang="ts">
import { ref } from 'vue';
import SearchPage from '@/components/search/SearchPage.vue';

const keyInfo = ref([
  { label: '输入框', defaultVal: '', name: 'text', type: 'text', size: 'default' },
  { label: '日期输入框', defaultVal: '', name: 'datePicker', type: 'datePicker', size: 'default' },
  { label: '月份输入框', defaultVal: '', name: 'datePickerMonth', type: 'datePickerMonth', size: 'default' },
  { label: '年份输入框', defaultVal: '', name: 'datePickerYear', type: 'datePickerYear', size: 'default' },
  { label: '日输入框', defaultVal: '', name: 'datePickerDay', type: 'datePickerDay', size: 'default' },
  { label: '输入框', defaultVal: '', name: 'datePickerTime', type: 'datePickerTime', size: 'default' },
  { label: '输入框', defaultVal: '', name: 'datePickerTimeDay', type: 'datePickerTimeDay', size: 'default' },
  {
    label: '下拉选择', defaultVal: '', name: 'select', type: 'select', size: 'default',
    options: [
      { label: '选项1', value: '1', disabled: true },
      { label: '选项2', value: '2' }
    ]
  }
]);

function onFormSubmitHandle(val) {
  console.log('=>(SearchDemo.vue:18) val', val);
}

function onClearForm(val) {
  console.log('=>(SearchDemo.vue:27) val', val);
}
</script>

<template>
  <div>
    <SearchPage :columnNumber="4" columnGap="10px" rowGap="20px" :keyInfo="keyInfo"
                @onFormSubmitHandle="onFormSubmitHandle" @onClearForm="onClearForm" :btn-show="true">
      <slot>123</slot>
    </SearchPage>
  </div>
</template>

<style scoped lang="scss">

</style>